<template>
  <div style="height: 240px">
    <ChartView ref="chartViewRef"></ChartView>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
const chartViewRef = ref()

const option = {
  /**
   * tooltip配置
   */
  tooltip: {
    // axisPointer: {
    //   // 坐标轴指示器，坐标轴触发有效
    //   type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
    // },
    formatter({ value, seriesName, name }) {
      return `${name}<br/>${seriesName}<br/>我的提示: ${value}`
    },
  },
  /**
   * 图例配置
   *
   * 要显示图例，series中的每个对象都必须配置name属性, 默认的图例文案就是name值
   */
  legend: {
    left: 0,
    /**
     * 定制图例文本内容
     * @param {*} name series 中name值
     */
    formatter: function (name) {
      return '我的 ' + name
    },
    /**
     * 设置图例图标样式
     */
    itemStyle: {
      color: 'red',
    },
    /**
     * 设置图例文本样式
     */
    textStyle: {
      color: 'green',
    },
  },
  /**
   * x坐标轴配置
   */
  xAxis: {
    /**
     * 坐标轴类型
     * 'value' 数值轴，适用于连续数据。
     * 'category' 类目轴，适用于离散的类目数据。
     * 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
     * 'log' 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
     */
    type: 'category',
    /**
     * x轴数据
     */
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  /**
   * y坐标轴配置
   */
  yAxis: {
    type: 'value',
  },
  /**
   * 图表配置
   */
  series: [
    {
      name: '第一类',
      /**
       * 图表类型
       */
      type: 'bar',
      /**
       * 图表数据
       */
      data: [120, 200, 150, 80, 70, 110, 130],
      label: {
        show: true, //开启显示
        position: 'top', //在上方显示
        formatter: function (params) {
          // console.log(params)
          return `我的 ${params.value}`
        },
        textStyle: {
          //数值样式
          color: 'orange',
          fontSize: 16,
        },
      },
    },
  ],
}

onMounted(() => {
  chartViewRef.value.setOption(option)
})
</script>
